<template>
	<view>
		<u-navbar :is-back="false" title="商品统计"
		  title-size="30"
		  :background="{background:'#2B88FE' }"
		  title-color="#fff">
		  <div class="head_icon">
		    <u-icon @click="$api.handleBackTo"
		      name="arrow-left" color="#fff"
		      size="36">
		    </u-icon>
		    <u-icon @click="$api.handleHomeTo"
		      name="home" color="#fff" size="36">
		    </u-icon>
		  </div>
		</u-navbar>
  <div class="app-drawSelect">
	  <u-tabs :list="tabs" active-color="#1677FF"
	    inactive-color="#666666" :current="current"
	    @change="Tabschange">
	  </u-tabs>  
   
	<u-sticky style="height: 110upx;"  bg-color="#F8F9FC">
	  <view class="topsearch el-flex  fff">
	
	<u-dropdown ref="uDropdown">
		       		 <u-dropdown-item
		       		   :title="TimeTypeName"
		       						    :options="TimesTypes"
		       						    @change="TimeChange">
		       						  </u-dropdown-item>
		       						</u-dropdown>
	
	    <view class="x-col-center x-col">
	      <view class="search">
			  
			  <u-button size="mini"
			    @click="timeDialog=true">
			    {{form.VTime ||'选择时间'}}
			    <u-icon name="arrow-down-fill">
			    </u-icon>
			  </u-button>
			  <u-picker mode="time" v-model="timeDialog"
			    @confirm="changeDate"></u-picker>
				
				

	      </view>
	    </view>	    
	  </view>
	</u-sticky>
 
		
		
	
	  <view class="slot-content">
	    <u-table>
	      <u-tr class="u-tr">
	        <u-th class="u-th" width="30%">商品名称
			</u-th>
	        <u-th class="u-th" width="15%">整装</u-th>
	        <u-th class="u-th" width="15%">数量</u-th>
	        <u-th class="u-th">散装</u-th>
	        <u-th class="u-th">数量</u-th>
	      </u-tr>
	      <u-tr class="u-tr" v-for="(item,i) in ProList" :key="i">
	        <u-td class="u-td" width="30%">
			<navigator :url="`/pages/sale/my_product_item?id=${item.fProId}`">
			{{item.fProName}}
			</navigator>
			</u-td>
	        <u-td class="u-td" width="15%">{{item.fPackUnit}}</u-td>
	        <u-td class="u-td" width="15%">{{item.fPackCount}}</u-td>
	        <u-td class="u-td">{{item.fUnit}}</u-td>
	        <u-td class="u-td">{{item.fCount}}</u-td>
	      </u-tr>
	    </u-table>
	  </view>
  </div>
  </view>
</template>

<script>
 
export default {
 
  data() {
    return {
		tabs: [
		  {
		    name: '未配送',
		    state: 1
		  },
		  {
		    name: '已配送',
		    state: 10
		  },
		  {
		    name: '全部',
		    state: 0
		  }
		],
      types: [],
	  TimesTypes: [
	    {
	      label: '全部',
	      value: 0
	    },
	    {
	      label: '今日',
	      value: 1
	    },
	    {
	      label: '昨日',
	      value: 2
	    },
		{
		  label: '七日内',
		  value: 8
		},
		{
		  label: '一月内',
		  value: 31
		},
		{
		  label: '三月内',
		  value: 91
		},
	  ],
	  taskDate: '选择时间',
	  timeDialog: false,
       PassTypeName: '状态',
	   TimeTypeName: '时间',
	    className: '类型',
		PassTypeId:0,
		ProList: [],
      isAllList: true,
      clist: [],
      status: 'loading',
      loading: true,
      form: {
        ClassId: 0,
        Status: 1,
		TimeTypeId:0,
        Key: '',
		VTime:''
      },
	     current: 0,
      page: 1,
      pSize: 10
    }
  },
  onReachBottom() {
    if (!this.isAllList) return
    this.page += 1
    this.getList()
  },
  onShow() {
  	  
  	  var d = new Date()
  	  this.taskDate = '${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()}'
  	  
  	//   this.form.VTime = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`
    uni.setNavigationBarTitle({
      title: '我的订单'
    })
    this.defaultData()
    this.getList()
  },
  
  methods: {
    addSave() {
      let list = this.clist.filter(x => x.checked)
      getApp().globalData.addCusGoodLi = list
      uni.navigateBack({
        delta: 1
      })
    },
    handleSelect(item, index) {
      item.checked = !item.checked
      console.log(item)
      this.$set(this.clist, index, item)
    },
	changeDate(e) {
	  this.form.VTime = `${e.year}-${e.month}-${e.day}`
	  this.defaultData()
   	  this.getList()
	},
    classChange(e) {
      this.className = this.types.find(x => x.value === e).label
      this.form.ClassId = e
      this.getList()
    },
 
	TimeChange(e) {
	  this.TimeTypeName = this.TimesTypes.find(x => x.value === e).label
	  this.form.TimeTypeId = e
	  this.getList()
	},
	Tabschange(e) {
	//  console.log('🚀 ~ file: taskList.vue ~ line 192 ~ change ~ e', e)
	  var that = this
	  this.current = e
	  this.form.Status = this.tabs[e].state
	  this.getList()
	
	},
    changeSearch() {
      this.defaultData()
      this.getList()
      // this.defaultData(() => {
      //   this.getList()
      // })
    },
    defaultData() {
      this.isAllList = true
      this.page = 1
      this.clist = []
      this.status = 'loading'
      this.loading = true
    },
    getList() {
      
	  this.$axios('api/Total/GetUserProList', 'post', { value: this.form }).then(res => {
	     this.ProList=res.Value
	  })
	  
    }
  },
  onShow() {
   this.defaultData()
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.app-drawSelect {
  .footer {
    padding-bottom: 100rpx;
    .u-btn,
    u-button {
      bottom: 2%;
      left: 2%;
      position: fixed;
      width: 96%;
    }
  }
}
</style>